import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router-dom'
import { Pagination } from 'antd'
import actions from '@/store/actions/saga'

import css from '@/styles/index.scss'

@connect(state => state.saga, actions)
class Saga extends Component {
    constructor(props) {
        super(props)
        this.state = {
            total: 50,
            id: 509,
            page: 1
        }
    }

    componentDidMount() {
        const { id, page } = this.state
        this.props.fetchNewsType()
        this.props.fetchNewsList(id, page)
    }

    // 分页
    handlePagination = page => {
        this.setState({ page })
        this.props.fetchNewsList(this.state.id, page)
    }

    // 切换分类
    handleTabs = id => {
        this.setState({ id })
        this.props.fetchNewsList(id, this.state.page)
    }

    render() {
        const { sagaNewsType, sagaNewsList, isFetching, newsListError } = this.props
        console.log(this.props)
        const { total, id, page } = this.state
        return (
            <div className={css.saga}>
            <ul className={css.tabs}>
                    {sagaNewsType &&
                        sagaNewsType.map((item, index) => (
                            <li
                                key={item.typeId}
                                className={`${item.typeId == id ? css.active : ''}`}
                            onClick={() => this.handleTabs(item.typeId)}>
                                {item.typeName}
                          </li>
                        ))}
                </ul>
                {isFetching && <div>加载中…</div>}
            {!isFetching && (
              <div>
                        <ul className={css.list}>
                  {sagaNewsList &&
                                sagaNewsList.map((item, index) => (
                                    <li key={item.newsId}>
                                        <Link to={`/detail/${item.newsId}`}>
                                        {index + 1}
、
                                        {item.title}
                                      </Link>
                                  </li>
                                ))}
                </ul>
                      <Pagination
                          size="small"
                          onChange={this.handlePagination}
                            current={Number(page)}
                          total={total} />
                        />
                    </div>
                )}
                {newsListError}
          </div>
        )
    }
}

export default Saga
